<template>
  <div class="f-c-g home-layout">
    <div class="nav-bar">
      <div class="nav-bar-title">日程</div>
      <div class="nav-bar-route">
        <span
          style="color: rgba(2, 56, 148, 1); cursor: pointer"
          @click="$router.push('/')"
        >首页</span>
        > 日程
      </div>
    </div>
    <div class="content-list f-c-g">
      <div class="content-list-search">
        <com-form
          v-if="showSearch"
          ref="form"
          class="search-form"
          size="mini"
          :form="searchItem"
          inline
          :disabled="load"
        >
          <template slot="last-item">
            <li slot="first-btn" class="btn">
              <el-button
                style="margin-right: 10px"
                type="primary"
                size="small"
                @click="search"
              >查 询</el-button>
            </li>
          </template>
        </com-form>
      </div>
      <div v-loading="load" class="content-list-items f-c-g">
        <div v-if="allList.length" class="content-list-box">
          <div v-for="item in allList" :key="item.code" class="content-item">
            <div
              class="content-item-info-box"
              :class="{
                beforeSty: timeIsBefore(item.beginTime, item.type)
              }"
            >
              <div class="item-time-sty">
                <!-- 四个角的边框效果 -->
                <div class="border_corner border_corner_left_top" />
                <div class="border_corner border_corner_right_top" />
                <div class="border_corner border_corner_left_bottom" />
                <div class="border_corner border_corner_right_bottom" />
                <div class="main">
                  <div class="year-month">
                    {{ getYearMonth(item.beginTime) }}
                  </div>
                  <div class="day-sty">{{ getDay(item.beginTime) }}日</div>
                </div>
              </div>
              <div class="item-info">
                <div
                  class="item-info-name"
                  v-html="
                    setHighlight(item.organizerInfo.NM, true) ||
                      item.organizerInfo.NM
                  "
                />
                <div
                  class="item-info-title"
                  v-html="setHighlight(item.title) || item.title"
                />
              </div>
            </div>
            <div
              class="item-info-time"
              :style="{ color: inTime(item.beginTime) ? '#FF9500' : '' }"
            >
              时间：{{ item.beginTime }} 至 {{ item.endTime }}
            </div>
            <div class="item-info-address">
              地点：<span v-html="setHighlight(item.address) || item.address" />
            </div>
          </div>
        </div>
        <div v-else style="text-align: center">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { comForm, conSelect } from 'qh-common'
import { Button } from 'element-ui'
import conDate from '@/components/date.vue'
var moment = require('moment')
import 'moment/locale/zh-cn'
import dao from './dao'
export default {
  components: {
    comForm,
    elButton: Button
  },
  data() {
    return {
      showSearch: false,
      load: false,
      changeBeiginTime: '2022-04-01',
      searchList: null,
      allList: [],
      queryOrganizerWithCurrentUser: [],
      organizerCodes: ''
    }
  },
  computed: {
    searchItem() {
      const self = this
      return {
        organizerCodes: {
          txt: '姓名',
          el: conSelect,
          config: {
            map: self.queryOrganizerWithCurrentUser,
            clearable: false,
            filterable: true
          }
        },
        title: {
          txt: '标题',
          config: {
            clearable: true
          }
        },
        address: {
          txt: '地点',
          config: {
            clearable: true
          }
        },
        beginYearMonthDay: {
          txt: '开始时间',
          el: conDate,
          change(e) {
            console.log(e, 'change回调')
            self.changeBeiginTime = e.val
          },
          config: {
            clearable: true,
            max: self.thirtyYearsLater('2022-04-01'),
            min: '2022-04-01'
          }
        },
        endYearMonthDay: {
          txt: '结束时间',
          el: conDate,
          config: {
            clearable: true,
            max: self.thirtyYearsLater(self.changeBeiginTime),
            min: self.changeBeiginTime
          }
        }
      }
    }
  },
  mounted() {
    this.organizerCodes = this.$route.query.organizerCodes
    this.getUersList()
  },
  methods: {
    addOneDay(time) {
      const m = moment(time).format('yyyy-MM-DD')
      const changeM = moment(m).add(1, 'day')
      return moment(changeM._d).format('yyyy-MM-DD')
    },
    inTime(time) {
      const s = moment(time).isAfter(
        this.addOneDay(this.searchList.beginYearMonthDay)
      )
      const e = moment(time).isBefore(
        this.addOneDay(this.searchList.endYearMonthDay)
      )
      console.log(s, e, '时间是否对')
      if (s && e) {
        return true
      }
    },
    timeIsBefore(date, type) {
      if (type === 'all_day') {
        return moment(date).isBefore(new Date(), 'day')
      }
      return moment(date).isBefore(new Date())
    },
    setHighlight(val, isName) {
      if (this.searchList.address) {
        const tags = this.searchList.address
        if (tags !== null && tags !== '') {
          const reg = new RegExp('(' + tags + ')', 'g')
          if (val !== null && val !== '') {
            return val.replace(reg, `<font style='color:#FF9500'>$1</font>`)
          } else {
            return val
          }
        } else {
          return val
        }
      }
      if (this.searchList.title) {
        const tagsTitle = this.searchList.title
        if (tagsTitle !== null && tagsTitle !== '') {
          const reg = new RegExp('(' + tagsTitle + ')', 'g')
          if (val !== null && val !== '') {
            return val.replace(reg, `<font style='color:#FF9500'>$1</font>`)
          } else {
            return val
          }
        } else {
          return val
        }
      }
      if (this.searchList.organizerCodes && isName) {
        let tags = ''
        if (this.queryOrganizerWithCurrentUser.length) {
          this.queryOrganizerWithCurrentUser.forEach(r => {
            if (this.searchList.organizerCodes.toString() === r.key) {
              tags = r.txt
            }
          })
        }
        if (tags !== null && tags !== '') {
          const reg = new RegExp('(' + tags + ')', 'g')
          if (val !== null && val !== '') {
            return val.replace(reg, `<font style='color:#FF9500'>$1</font>`)
          } else {
            return val
          }
        } else {
          return val
        }
      }
    },
    getUersList() {
      this.load = true
      dao.queryOrganizerWithCurrentUser().then(res => {
        const loginUser = JSON.parse(localStorage.getItem('user'))
        const organizerCodes = this.$route.query.organizerCodes
        this.queryOrganizerWithCurrentUser.push({
          txt: loginUser.NM,
          key: loginUser.SSN_SN
        })
        if (res && res.length) {
          res.map(item => {
            this.queryOrganizerWithCurrentUser.push({
              txt: item.NM,
              key: item.SSN_SN
            })
          })
        }

        this.showSearch = true
        const startMonth = moment(moment().startOf('month')._d).format(
          'YYYY-MM-DD'
        )
        const endtMonth = moment(moment().endOf('month')._d).format(
          'YYYY-MM-DD'
        )
        this.$nextTick(() => {
          const data = {
            organizerCodes,
            beginYearMonthDay: startMonth,
            endYearMonthDay: endtMonth
          }
          this.$refs.form.setDatas(data)
          this.searchList = this.$refs.form.getDatas()
        })
        const searchData = {
          organizerCodes: [this.organizerCodes],
          beginYearMonthDay: startMonth,
          endYearMonthDay: endtMonth
        }
        this.getList(searchData)
      })
    },
    getDay(date) {
      return moment(date).format('DD')
    },
    getYearMonth(date) {
      return moment(date).format('yyyy-MM')
    },
    getTime(date) {
      return moment(date).format('H:mm:ss')
    },
    getList(data) {
      dao
        .queryCurrentUserScheduleWithCondition(data)
        .then(res => {
          console.log(res, 'list列表')
          this.allList = res
          this.load = false
        })
        .catch(() => {
          this.load = false
        })
    },
    thirtyYearsLater(time) {
      return moment(time).add(30, 'year').format('YYYY-MM-DD')
    },
    search() {
      this.searchList = this.$refs.form.getDatas()
      if (!this.searchList.beginYearMonthDay) {
        this.searchList.beginYearMonthDay = '2022-04-01'
      }
      if (!this.searchList.endYearMonthDay) {
        this.searchList.endYearMonthDay = this.thirtyYearsLater(
          this.searchList.beginYearMonthDay
        )
      }
      this.searchList.organizerCodes = [this.searchList.organizerCodes]
      this.load = true
      this.getList(this.searchList)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content .right-parent .bottom-parent > * {
  width: 200px !important;
  max-width: 100% !important;
}
.day-sty {
  padding: 16px;
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #949699;
  background-color: rgba(242, 248, 255, 1);
}
.year-month {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  padding: 8px 20px 10px 18px;
  background: #508cd5;
}
.main {
  width: 100px;
  height: 104px;
  border: 1px solid #e8e8e8;
}
.beforeSty {
  .item-info-title {
    text-decoration: line-through !important;
  }
  .day-sty {
    background-color: rgba(252, 254, 255, 1) !important;
  }
  .year-month {
    background: rgba(193, 202, 214, 1) !important;
  }
}
.border_corner {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0);
  border: 2px solid #999999;
}
.border_corner_left_top {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.border_corner_right_top {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
.border_corner_left_bottom {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}
.border_corner_right_bottom {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
.item-info-address {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #949699;
  margin-top: 20px;
}
.item-info-time {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #949699;
  margin-top: 20px;
}
.item-info-title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  line-height: 24px;
  margin-top: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.item-info {
  margin-left: 20px;
  flex: 1;
}
.item-info-name {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
}
.content-item-info-box {
  display: flex;
}
.item-time-sty {
  // width: 100px;
  // height: 100px;
  // background: #f2f8ff;
  // border: 1px solid #e8e8e8;
  position: relative;
  display: inline-block;
}
.content-list-search {
  margin: 10px 0 0 10px;
}
.content-list-items {
  height: 40px;
  margin: 10px 10px 10px 10px;
  display: flex;
}
.content-list-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: 10px;
}
.content-list-box:after {
  content: '';
  width: 32.5%;
}
.content-item {
  width: 32.5%;
  height: 200px;
  background: #ffffff;
  border: 1px solid #eff2f6;
  margin-bottom: 10px;
  padding: 20px;
}
.content-list {
  background-color: #fff;
  margin-top: 10px;
}
.home-layout {
  // padding: 20px;
}
.nav-bar {
  width: 100%;
  height: 40px;
  background-color: #fff;
  border-left: 4px solid #0862d1;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-bar-title {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.nav-bar-route {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.search-form {
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: auto;

    &.last-item {
      .el-form-item__content {
        width: auto;

        > * {
          width: auto;
        }
      }
    }

    .el-form-item__label {
      font-size: 12px;
      white-space: normal;
      flex-shrink: 0;
      width: auto !important;
    }

    .el-form-item__content {
      min-width: 200px;
      flex-grow: 1000;
      flex-shrink: 1;

      .right-parent {
        .bottom-parent {
          > * {
            width: 200px;
          }
        }
      }
    }
  }
}
</style>
